<template>
	<div>
		<el-container>
			<el-aside :style="{width:isCollapse?'64px':'200px'}">
				<div class="l-head">
					<p v-if="!isCollapse">Sharp Mes System</p>
					<p v-else>Mes</p>
				</div>
				<div class="l-user">
					<div class="ll-img" :style="{width:isCollapse?'60px':'80px'}">

						<!-- <img src="../../assets/img/user.jpg" alt="" width="100%"> -->

						<img src="../../assets/img/user.jpg" alt="" width="100%">

					</div>
					<div v-if="!isCollapse">
						<p>admin</p>
						<span>
							<i></i>
							Online
						</span>
					</div>
				</div>
				<div class="sou" v-if="!isCollapse">
					<input type="text" placeholder="请输入搜索内容" width="100%">
				</div>
				<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
					background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :collapse="isCollapse"
					:unique-opened="true" :router="true">


					<el-submenu index="1">
						<template slot="title">
							<i class="el-icon-data-analysis"></i>
							<span>系统看板</span>
						</template>
						<el-menu-item-group>
							<template slot="title">分组一</template>
							<el-menu-item index="1-1">选项1</el-menu-item>
							<el-menu-item index="1-2">选项2</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					<el-submenu index="2">
						<template slot="title">
							<i class="el-icon-edit-outline"></i>
							<span>系统管理员</span>
						</template>
						<el-menu-item-group>
							<template slot="title">分组一</template>
							<el-menu-item index="1-1">选项1</el-menu-item>
							<el-menu-item index="1-2">选项2</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					<el-submenu index="3">
						<template slot="title">
							<i class="el-icon-pie-chart"></i>
							<span>生产信息管理</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="/productOne">生产看板示例一</el-menu-item>
							<el-menu-item index="/productTwo">生产看板示例二</el-menu-item>
							<el-menu-item index="/productThree">生产数据报表信息</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					<el-submenu index="4">
						<template slot="title">
							<i class="el-icon-warning"></i>
							<span>报警信息管理</span>
						</template>
						<el-menu-item-group>
							<template slot="title">分组一</template>
							<el-menu-item index="1-1">选项1</el-menu-item>
							<el-menu-item index="1-2">选项2</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					<el-submenu index="5">
						<template slot="title">
							<i class="el-icon-s-marketing"></i>
							<span>历史曲线记录</span>
						</template>
						<el-menu-item-group>
							<template slot="title">分组一</template>
							<el-menu-item index="1-1">选项1</el-menu-item>
							<el-menu-item index="1-2">选项2</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					<el-submenu index="6">
						<template slot="title">
							<i class="el-icon-s-help"></i>
							<span>能耗信息管理</span>
						</template>
						<el-menu-item-group>
							<template slot="title">分组一</template>
							<el-menu-item index="1-1">选项1</el-menu-item>
							<el-menu-item index="1-2">选项2</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					<el-submenu index="7">
						<template slot="title">
							<i class="el-icon-s-platform"></i>
							<span>设备信息管理</span>
						</template>
						<el-menu-item-group>
							<template slot="title">分组一</template>
							<el-menu-item index="1-1">选项1</el-menu-item>
							<el-menu-item index="1-2">选项2</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					<el-submenu index="8">
						<template slot="title">
							<i class="el-icon-s-order"></i>
							<span>项目信息管理</span>
						</template>
						<el-menu-item-group>

							<el-menu-item index="/admin/project/one">
								<i class="quan"></i>
								<span>悬赏项目平台</span>
							</el-menu-item>
							<el-menu-item index="/admin/project/two">
								<i class="quan"></i>
								<span>所有项目信息</span>
							</el-menu-item>
							<el-menu-item index="/admin/project/three">
								<i class="quan"></i>
								<span>我参与的项目</span>
							</el-menu-item>

						</el-menu-item-group>
					</el-submenu>
					<el-submenu index="9">
						<template slot="title">
							<i class="el-icon-user-solid"></i>
							<span>我的账户</span>
						</template>
						<el-menu-item-group>
							<template slot="title">分组一</template>
							<el-menu-item index="1-1">选项1</el-menu-item>
							<el-menu-item index="1-2">选项2</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					<el-submenu index="10">
						<template slot="title">
							<i class="el-icon-message"></i>
							<span>我的信息</span>
						</template>
						<el-menu-item-group>
							<template slot="title">分组一</template>
							<el-menu-item index="1-1">选项1</el-menu-item>
							<el-menu-item index="1-2">选项2</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
				</el-menu>
			</el-aside>
			<el-container>
				<el-header>
					<span class="toggle" @click="isCollapse=!isCollapse" style="float: left;">
						<i class="el-icon-s-unfold"></i>
					</span>
					Header
				</el-header>

					<el-main style="height: 90vh;">

						<router-view></router-view>
					</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import axios from 'axios'
	import '@/mock/index.js'
	export default {
		data() {
			return {
				isCollapse: true,
				plist: []
			}
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},

			getProduct() {
				axios.get("api/Product")
					.then(res => {
						if (res.data.code === 0) {
							// console.log(res.data.data.list);
							this.plist = res.data.data.list
						}
					})


			},
			created() {
				this.getProduct()
			}
		},
	}
</script>
<style scoped lang="scss">
	.l-head {
		line-height: 60px;
		font-size: 20px;
		font-weight: 700;
		color: #fff;
		background-color: #367fa9;
	}

	.l-user {
		display: flex;

		.ll-img {
			max-height: 80px;
			border-radius: 50%;
			overflow: hidden;
		}
	}

	.el-header,
	.el-footer {
		background-color: #3c8dbc;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		background-color: #D3DCE6;
		color: #333;
		text-align: center;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		// text-align: center;
	}

	body>.el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}


	.el-submenu__title {
		height: 44px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}

	.el-menu-vertical-demo {
		max-width: 200px;
		height: 100vh;
	}
</style>
<style lang="scss" scoped>
	.l-head {
		line-height: 60px;
		font-size: 20px;
		font-weight: 700;
		color: #fff;
		background-color: #367fa9;
	}

	.l-user {
		display: flex;

		.ll-img {
			max-height: 80px;
			border-radius: 50%;
			overflow: hidden;
		}
	}
</style>

<style scoped lang="scss">
	.el-header,
	.el-footer {
		background-color: #3c8dbc;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		background-color: #D3DCE6;
		color: #333;
		text-align: center;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: left;
	}

	body>.el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}

	.el-menu-vertical-demo {
		max-width: 200px;
		height: 100vh;

		.quan {
			display: inline-block;
			width: 12px;
			height: 12px;
			border: 3px solid #fff;
			box-sizing: border-box;
			border-radius: 50%;
		}
	}
</style>
